<template>
    <div class="form-sty">
        <div class="form-title">
            <div class="span-radius"></div>
            体温平均值变化
        </div>
        <div class="">
            <div style="width:866px;height:300px" ref="zhexian"></div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref,onUnmounted } from 'vue';
import * as echarts from 'echarts';

const female = ref([45, 20, 30, 40, 50])
const mandata = ref([65, 20, 30, 40, 50])

const femaleyue = ref(['一月', '二月', '三月', '四月', '五月'])
const mandatayue = ref(['一月', '二月', '三月', '四月', '五月'])

const zhexian = ref(null);

const initChart = () => {
    const myChart = echarts.init(zhexian.value);
    myChart.hideLoading();

    const option = {
        // backgroundColor: '#394056',
        title: {
            textStyle: {
                fontWeight: 'normal',
                fontSize: 16,
                color: '#F1F1F3'
            },
            left: '6%'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            data: femaleyue.value
        }
        ],
        yAxis: [{
            type: 'value',
            // name: '单位（%）',
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        }],
        series: [{
            name: '女',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(137, 189, 27, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(137, 189, 27, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(137,189,27)',
                    borderColor: 'rgba(137,189,2,0.27)',
                    borderWidth: 12

                }
            },
            data: female.value 
        },
        {
            name: '男',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 1
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(0, 136, 212, 0.3)'
                    }, {
                        offset: 0.8,
                        color: 'rgba(0, 136, 212, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10
                }
            },
            itemStyle: {
                normal: {
                    color: 'rgb(0,136,212)',
                    borderColor: 'rgba(0,136,212,0.2)',
                    borderWidth: 12

                }
            },
            data: mandata.value
        },
        ]
    };

    myChart.setOption(option);
};


onMounted(async () => {
    initChart()
});

</script>

<style scoped>
@import "@/Css/index.css";
</style>